<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>运行配置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="settings.ico" type="image/x-icon"/>
		<!-- 样式 -->
		<link rel="stylesheet" type="text/css" href="./css/element_UI.css"/>
		<link href="./css/main.css" rel="stylesheet">
		<!-- 脚本 -->
		<script type="text/javascript" src="/eel.js"></script>
		<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/element_UI.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container" id="app">
			<!-- 路径设置对话框 -->
			<el-dialog title="提示" :visible.sync="dialogVisible" :show-close="false" :close-on-press-escape="false" width="40%"> 	
				<p class="text">{{dialogText}}</p>
				<el-input 
					placeholder='打开资源管理器, 选择用例数据包路径' 
					v-model='packagePath'>
					<el-button slot="append" icon="el-icon-folder-opened" @click="openWindows"></el-button>
				</el-input>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitInformation">提交</el-button>
				</span>
			</el-dialog>
			<!-- 执行用例确认对话框 -->
			<el-dialog title="确认你要执行的测试用例文件" :visible.sync="dialogCases" :show-close="false" :close-on-press-escape="false" width="60%">
				<el-row>
					<el-col :span="24">
						<div class="cases-list-box">
							<p v-for="file in getSetArray" class="cases-list-item">{{ file }}</p>
						</div>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="onRun">确认</el-button>
					<el-button @click="dialogCases = false">返回</el-button>
				</span>
			</el-dialog>
			<!-- 内容主体 -->
			<el-row>
				<!-- 左侧目录结构 -->
				<el-col :span="10" class="left_tree">
					<!-- 结构树 -->
					<el-input
						placeholder="输入关键字进行过滤"
						v-model="filterText"
						size="medium"
						suffix-icon="el-icon-search">
					</el-input>
					<el-tree
						ref="tree"
						class="filter-tree"
						:data="data"
						node-key="id"
						:props="defaultProps"
						:filter-node-method="filterNode"
						show-checkbox
						@check="onChoice">
					</el-tree>
				</el-col>
				<!-- 右侧功能表单 -->
				<el-col :span="14" class="right_form">
					<el-form ref="form" :model="form" label-width="120px">
						<el-card class="box-card card-box" shadow="hover">
							<div slot="header" class="clearfix">
								<span>测试环境配置</span>
								<span slot="tip" class="el-upload__tip">确保你的测试机中存在对应浏览器的driver驱动程序！</span>
							</div>
							<el-form-item label="测试浏览器平台 :">
								<el-radio-group v-model="form.browser">
									<el-radio label="Chrome"></el-radio>
									<el-radio label="Edge"></el-radio>
									<el-radio label="Firefox"></el-radio>
									<el-radio label="IE"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="被测环境地址 :">
								<el-input v-model="form.url" size="medium">
									<template slot="prepend"><span class="el-icon-link"></span></template>
								</el-input>
							</el-form-item>
							<el-form-item label="隐式等待时长 :">
								<el-input v-model="form.implicitlyWait" size="medium">
									<template slot="prepend"><span class="el-icon-time"></span></template>
								</el-input>
							</el-form-item>
						</el-card>
						<el-card class="box-card card-box" shadow="hover">
							<div slot="header" class="clearfix">
								<span>测试角色/主角色</span>
							</div>
							<el-row>
								<el-col :span="12">
									<el-form-item label="测试角色用户名 :">
										<el-input v-model="form.user" size="medium"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="测试角色密码 :">
										<el-input v-model="form.password" size="medium" placeholder="若无需填写则为空即可"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-card>
						<el-card class="box-card card-box" shadow="hover">
							<div slot="header" class="clearfix">
								<span>其它</span>
								<span slot="tip" class="el-upload__tip">目前“辅助插件”仅支持TDOA系统辅助方法集</span>
							</div>
							<el-form-item label="辅助插件选择 :">
								<el-select v-model="form.pluginName" placeholder="请选择插件" size="medium">
									<el-option label="OA系统辅助方法集" value="oa-class"></el-option>
								</el-select>
							</el-form-item>
							<el-row>
								<el-col :span="8">
									<el-form-item label="接口脚本运行:">
										<el-switch v-model="form.interfaceSwitch"></el-switch>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="登录验证码识别:">
										<el-switch v-model="form.codeSwitch"></el-switch>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="用例出错复测:">
										<el-switch v-model="form.retrySwitch"></el-switch>
									</el-form-item>
								</el-col>
							</el-row>
						</el-card>
						<el-form-item>
							<el-row class="form-box-button">
								<el-col :span="4">
									<el-button type="primary" @click="onSubmit">开始执行</el-button>
								</el-col>
								<el-col :span="4">
									<el-button @click="onTermination">取消执行</el-button>
								</el-col>
								<el-col :span="16" style="text-align: right;">
									<el-tooltip value content="点击可修改'用例数据包'路径!" placement="left">
										<el-button type="primary" icon="el-icon-setting" size="mini" @click="setPath"></el-button>
									</el-tooltip>
								</el-col>
							</el-row>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<script src="./js/main.js"></script>
	</body>
</html>